<template>
  <div class="banner">
    <img
      class="banner-img"
      src="http://img1.qunarzz.com/sight/p0/1809/10/10d6568ad3ad4bb5a3.img.jpg_600x330_02eafe8e.jpg"
    />
    <div class="banner-info">
      <div class="banner-number">
        <span class="iconfont">&#xe612;</span>{{8}}
      </div>
      <div class="banner-title">亚龙湾热带天堂森林公园(AAAA景区)</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBanner"
};
</script>

<style lang="stylus" scoped>
.banner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  background-color: #eee;
}

.banner .banner-img {
  width: 100%;
}

.banner .banner-info{
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  width: 100%;
  line-height: .6rem;
  padding: 0 .2rem .2rem;
  color:#fff;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0, .6));
}

.banner .banner-info .banner-number {
  width: 1.2rem;
  height: .6rem;
  text-align: center;
  line-height: .6rem;
  border-radius: .2rem;
  background-color: rgba(0,0,0, .5);
}

.banner .banner-info .banner-title {
  width: 100%;
  height: .6rem;
  font-size: .36rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

</style>